<template>
  <div class="fault">
    <el-main>
      <div class="bgimg"></div>
      <h1>很抱歉!您访问的页面不存在...</h1>
      <span>您可以<router-link class="back" to='/index'>返回首页</router-link></span>
    </el-main>
  </div>
</template>

<script>
export default{
  name :'Fault'
}
</script>

<style lang="scss" scoped>
  .fault {
    .el-main {
      height: 80vh;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .bgimg {
        width: 99vw;
        height: 50vh;
        background: url(../assets/imgs/404.png) no-repeat center/50%;
      }
      h1 {
        font-size: 32px;
        font-weight: 500;
        color: #a0a0a0;
      }
      span {
        color: #a0a0a0;
        font-size: 24px;
        margin: 16px 220px 0 0;
      }
      .back {
        font-size: 20px;
        margin-left: 16px;
        color: #fff;
        background-color: #7ecef4;
        border-radius: 8px;
        padding: 4px 16px;
      }
    }
  }
</style>
